import React,{Component} from 'react';
import {Route,Switch,Redirect} from 'react-router-dom'
import Cookies from 'js-cookie'
import {connect} from 'react-redux'
import { Layout } from 'antd';

import {GetUserAPI} from '../../reudx/action.js'

import LeftNav from '../../component/left-bar/left-nav'
import MyHeader from '../../component/myheader/myheader'
//导入路由组件
import Home from '../home/home'
import User from '../user/user'
import Roles from '../roles/roles'
import Category from '../product/category/category'
import Commodity from '../product/commodity/commodity'
import Bar from '../charts/bar/bar'
import Pie from '../charts/pie/pie'
import Line from '../charts/line/line'


import './main.less'

const { Header, Footer, Sider, Content } = Layout;
class Main extends Component{
    componentDidMount(){
        let userid = Cookies.get("userid")
        let serverid = this.props.user._id
        if(userid&&!serverid){
            this.props.GetUserAPI(userid)
        }
        //发送请求,解决用户第二次打开的情况
       /*  if(userid&&!serverid){
            setTimeout(()=>{
                this.props.GetUserAPI(userid)
            },2000)
            
        } */
    }

    render() {
        //用户登录之后篡改cookie刷新页面
        // 防止用户篡改cookie之后再次刷新界面
       //debugger
        const userid = Cookies.get("userid")
        //console.log("这个是Main页面的cookie",(userid))
        if(!userid){
            return <Redirect to='/login'/>
        }
        
        const server_userid = this.props.user._id
        if(!server_userid){
            return <div>加载中</div>
        }
       // console.log("这个是Main页面返回的userid",server_userid)
        //console.log(this.props.user)
        //console.log(userid)
        return(
            <Layout style={{minHeight: '100vh'  }}>
                <Sider >
                    <LeftNav></LeftNav>
                </Sider>
                <Layout style={{backgroundColor:'#F0F2F5'}}>
                    <MyHeader></MyHeader>
                    <Content style={{backgroundColor:'white',margin:'0 10px'}}>
                    
                        <Switch>
                            <Route path = "/home" component={Home}/>
                            <Route path = "/user" component={User}/>
                            <Route path = "/roles" component={Roles}/>
                            <Route path = "/product/category" component={Category}/>
                            <Route path = "/product/commodity" component={Commodity}/>
                            <Route path = "/charts/bar" component={Bar}/>
                            <Route path = "/charts/pie" component={Pie}/> 
                            <Route path = "/charts/line" component={Line}/>
                            <Redirect to="/home"/>
                        </Switch>
                    
                    </Content>
                    <Footer style={{textAlign:'center'}}>推荐使用谷歌浏览器，体验效果会更好</Footer>
                </Layout>
            </Layout>
        )
    }
}
export default connect(
    state =>({user:state.user}),
    {GetUserAPI}
)(Main)